<template>
    <div>
        <!-- 顶部 -->
        <div>
            <van-nav-bar
                title="忘记密码"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
            />

        </div>
        <!-- logo -->
        <div class="logoImgBox">
            <img class="logoImg" src="../assets/logo.jpg" alt="">
            <h3>欢迎来到，一起来吧！</h3>
        </div>
        <!-- 输入框 -->
        <div class="loginBox">
            <van-cell-group center="true" size="small">
            <van-field
                ref="loginName"
                v-model="loginName"
                label="用户名："
                placeholder="请输入用户名"
            />
            <van-field
                ref="newpassword"
                v-model="newpassword"
                label="新密码："
                placeholder="请输入新密码"

            />
            <van-field
                ref="phonenumber"
                v-model="phonenumber"
                label="手机号："
                placeholder="请输入手机号"

            />
            <!-- 发送给验证码 -->
            <van-field
                ref="code"
                v-model="code"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
            >
  <template #button>
    <van-button size="small" type="primary" @click="getcode">发送验证码</van-button>
  </template>
</van-field>
  <div style="margin: 16px; " class="submitBox">
    <van-button round block type="info" native-type="submit" @click="suermodify">确认修改</van-button>
    <p>
    <router-link to="/register" tag="span"><span>注册新用户！</span></router-link>
    
    <span></span><router-link to="/login" tag="span"><span>去登录！</span></router-link>
    </p>
  </div>
</van-cell-group>
        </div>
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
import { forget,messageCode } from '../api/api';
export default {
    name:"forgetCode",
    data(){
        return{
            
            loginName:"",
            newpassword:"",
            phonenumber:"",
            code:"",
        }
    },
    methods: {
        onClickLeft() {
            window.history.go(-1)
        },
        onClickRight() {},
        getcode(){
           messageCode(this.phonenumber).then(res=>{
                console.log(res);
            })  
        },
        suermodify(){
            console.log(24);
            forget(this.loginName,this.newpassword,this.phonenumber,this.code).then(res=>{
                
                    console.log(121234534);
                    console.log(res);
                    alert("修改密码成功")
                
            })
        }
    // forget().then(res=>{

    // })
  },
}
</script>
<style scoped lang="less">
.logoImg {
    margin: auto;
    /* display: block; */
    margin-top: 30px;
    width: 120px;
    height: 120px;
}
.logoImgBox {
    text-align: center;
}
.loginBox {
    margin: auto;
    width: 300px;
}
/deep/.van-field__label {
    width: 5.2em;
}
/deep/.van-nav-bar__content {
    background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon{
    color: #fff;
}
/deep/.van-nav-bar__text {
    color: #fff;
}
/deep/.van-nav-bar__title {
    color: #fff;
}
/deep/.van-button--info {
    background-color: #cc0000;
    border: 1px solid #cc0000;
}
.submitBox>p>span:nth-of-type(2) {
    display: inline-block;
    width: 99px;
}
.submitBox>p {
    color: #999;
}
/deep/.van-button--primary {
    background-color: #cc0000;
    border: 1px solid #cc0000;
}
</style>


